<template>
  <a-modal
    :title="title"
    :width="1300"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">

            <a-col :md="6" :sm="8">
              <a-form-item label="分类名称">
                <a-input placeholder="请输入分类名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="sReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
            </a-col>

          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      </div>

      <div>

        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipaginations"
          :loading="loading">
          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        </a-table>
      </div>
      <type-detail-modal ref="modalForm" @ok="modalFormOk"></type-detail-modal>
    </a-card>
  </a-modal>
</template>

<script>
  import TypeDetailModal from './TypeDetailModal'
  import { deleteAction, getAction } from '../../../api/manage'

  export default {
    description:'子分类页面',
    name: 'TypeDetail',
    components: {
      TypeDetailModal
    },
    data() {
      return {
        title: '子分类',
        visible: false,
        model: {},
        //表格展示
        columns: [
          {
            title: '编号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '分类名称',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '创建者',
            align: 'center',
            dataIndex: 'createBy'
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '最后更新者',
            align: 'center',
            dataIndex: 'updateBy'
          },
          {
            title: '最后更新时间',
            align: 'center',
            dataIndex: 'updateTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],

        dataSource: [],
        ipaginations: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },

        url: {
          detailList: '/type/getTypeByParentId',
          delete: "/type/delete"
        },
        confirmLoading: false,
        loading: false,
        queryParam: {
          name: ''
        }
      }
    },
    methods: {
      openView(record) {
        sessionStorage.setItem("parentId",record.id)
        this.id = record.id
        let params = {
          pageNo: this.ipaginations.current,
          pageSize: this.ipaginations.pageSize,
          name: this.queryParam.name,
          id: record.id
        }
        getAction(this.url.detailList, params).then((res) => {
          this.dataSource = res.result.list
          this.ipaginations.total = res.result.total
        }).finally(() => {
          this.loading = false
        })
        this.visible = true
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      },
      modalFormOk() {
        this.ipaginations = this.$options.data().ipaginations
        this.sReset()
      },
      handleAdd() {
        this.$refs.modalForm.add()
      },
      handleEdit(record){
        this.$refs.modalForm.edit(record)
      },
      /**
       * 重置查询
       */
      sReset() {
        this.queryParam.name = ''
        this.searchQuery()
      },
      searchQuery() {
        let params = {
          pageNo: this.ipaginations.current,
          pageSize: this.ipaginations.pageSize,
          name: this.queryParam.name,
          id: this.id
        }
        getAction(this.url.detailList, params).then((res) => {
          this.dataSource = res.result.list
          this.ipaginations.total = res.result.total
        }).finally(() => {
          this.loading = false
        })
      },
      handleDelete(record){
        let params = {
          id:record.id
        }
        deleteAction(this.url.delete,params).then((res)=>{
          if (res.success){
            this.$message.success(res.message)
            this.sReset()
          }else {
            this.$message.error("删除失败")
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>